<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'处理'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "270">
        <div class="analyItem">
            <p class="analyItemTit tx-center">预留</p>
            <div class="analyItemCon"></div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">预留</p>
            <div class="analyItemCon"></div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">预留</p>
            <div class="analyItemCon"></div>
        </div>
    </div>
    <div class="layerRtb-footer" style="height:270px;">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">

            </div>
        </div>
        <div class="clearfix">
            <div class="col-md-12 handle-left pb10" style="min-height: 172px;">
                <div class="clearfix">
                    <!-- <h2 class="uiTitle2 mt3">
                        <i class="uiTitle-icon"></i>
                        处理
                    </h2> -->
                    <ul class="clearfix handleOper uiTab7">
                        <li :class="['fl', currentOperIndex === 0 ? 'uiTab7-active' : '']"  @click="currentOperIndex = 0">阶段跳转</li>
                        <li :class="['fl', currentOperIndex === 1 ? 'uiTab7-active' : '']"  @click="currentOperIndex = 1">项目调整</li>
                        <li :class="['fl', currentOperIndex === 2 ? 'uiTab7-active' : '']"  @click="currentOperIndex = 2">订单暂停</li>
                    </ul>
                </div>
                <div class="pr10 stepBox mt10" v-if=" currentOperIndex === 0 ">
                    <div class="mb20" >
                        <p class="cRed" v-if="isClick">{{`1、当前阶段：【${currentStageName}】,不可提交`}}</p>
                        <p class="cRed" v-else>{{`1、当前阶段：【${currentStageName}】,点击提交进入下一阶段`}}</p>
                        <!-- <p class="cRed">2、注意事项：准备阶段,【开工日期确认】、【无名材料确认】、【人员确认】、【施工进度表】确认完成后方可点击提交进入在施阶段</p> -->
                    </div>
                    <el-steps :active="currentStage"  align-center>
                        <el-step v-for="(item, index) in projectProcess" :key="index" :title="item"></el-step>
                    </el-steps>
                    <div class="tx-center mt20">
                        <input type="button" :value='buttonValue' disabled="disabled" class="uiBtn-normal uiBtn-blue-no" v-if="isClick">
                        <input type="button" class="uiBtn-normal uiBtn-blue" :value='buttonValue'  @click="changeStage()" v-else>
                    </div>
                </div>
                <div v-if="currentOperIndex === 1" class="pr10  mt10 projectOper">
                    <div class="mb20 tx-fb">
                        <p>项目名称: <span>{{leftInfo.proname}}</span></p>
                        <p class="mt10">开工日期: <span>{{$utils.format('yyyy-MM-dd',leftInfo.AfterMarketStateTime) }}</span></p>
                    </div>
                    <div class="tx-center mt30">
                        <div style="display:inline-block" class="mr10">
                            <input type="button" class="uiBtn-normal uiBtn-blue" value='点击调整到坏账'  @click="submitStage(1)" v-if="leftInfo.AfterMarketState<70">
                            <input type="button" disabled="disabled" class="uiBtn-normal uiBtn-blue-no"  value='无法调整为坏账' v-else>
                        </div>
                        <div style="display:inline-block">
                            <input type="button" class="uiBtn-normal uiBtn-blue" value='点击调整到退单'  @click="submitStage(2)" v-if="leftInfo.AfterMarketState<80">
                            <input type="button" disabled="disabled" class="uiBtn-normal uiBtn-blue-no"  value='无法调整为退单'  v-else>
                        </div>
                    </div>
                </div>
                <div v-if="currentOperIndex === 2"  class="pr10  mt10 projectOper">
                    <div class="mb20 tx-fb">
                        <p>项目名称: <span>{{leftInfo.proname}}</span></p>
                        <p class="mt10">开工日期: <span>{{$utils.format('yyyy-MM-dd',leftInfo.AfterMarketStateTime) }}</span></p>
                    </div>
                    <div class="tx-center mt30">
                        <input type="button" class="uiBtn-normal uiBtn-blue" :value='InspectionStateName'  @click="changeInspec()">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { changeStage, changeInspectionState } from '../Resources/Api/index'
export default {
    data () {
        return {
            projectProcess: ['审计', '准备', '在施', '竣工', '完工', '历史'],
            currentStageName: '', // 当前阶段的名称
            currentStage: 0, // 当前阶段
            buttonValue: '点击进入准备',
            nextStage: '', // 跳转的阶段
            currentOperIndex: 0, // 操作的Index
            isClick: false, // 是否可以点击
            InspectionStateName: '' // 巡检名称
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.InspectionStateName = this.leftInfo.InspectionState ? '开启订单' : '关闭订单'
        this.stage(this.leftInfo.AfterMarketState)
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        // 开启 关闭巡检
        changeInspec () {
            this.$confirm(`确定${this.InspectionStateName}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let parm = {
                    orderNo: this.leftInfo.orderno
                }
                changeInspectionState(parm).then((result) => {
                    if (result.data.StatusCode === 1) {
                        this.$message({
                            type: 'success',
                            message: result.data.StatusMsg
                        })
                        const currentLeftInfo = this.leftInfo
                        this.setLeftData({
                            ...currentLeftInfo,
                            InspectionState: this.leftInfo.InspectionState ? 0 : 1
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: result.data.StatusMsg
                        })
                    }
                }).catch((error) => {
                    this.$message({
                        type: 'info',
                        message: error.data.StatusMsg
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消跳转'
                })
            })
        },
        // 阶段
        stage (AfterMarketState) {
            if (AfterMarketState === 10 || AfterMarketState === 40 || AfterMarketState > 50) {
                this.isClick = true
            } else {
                this.isClick = false
            }
            switch (AfterMarketState) {
            case 0:
            case 10:
                this.currentStageName = '审计'
                this.currentStage = 1
                this.nextStage = '审计'
                break
            case 20:
                this.currentStageName = '准备'
                this.currentStage = 2
                this.nextStage = '在施'
                break
            case 30:
                this.currentStageName = '在施'
                this.currentStage = 3
                this.nextStage = '竣工'
                break
            case 31:
                this.currentStageName = '施前'
                this.currentStage = 3
                this.nextStage = '竣工'
                break
            case 32:
                this.currentStageName = '施中'
                this.currentStage = 3
                this.nextStage = '竣工'
                break
            case 33:
                this.currentStageName = '施尾'
                this.currentStage = 3
                this.nextStage = '竣工'
                break
            case 40:
                this.currentStageName = '竣工'
                this.currentStage = 4
                this.nextStage = '完工'
                break
            case 50:
                this.currentStageName = '完工'
                this.nextStage = '历史'
                this.currentStage = 5
                break
            case 60:
                this.currentStageName = '历史'
                this.currentStage = 6
                break
            case 70:
                this.currentStageName = '坏账'
                break
            case 80:
                this.currentStageName = '退单'
                break
            }
            if (AfterMarketState === 60) {
                this.buttonValue = '已完成阶段'
            } else if (AfterMarketState > 60 && AfterMarketState < 100) {
                this.buttonValue = '无法提交'
            } else {
                this.buttonValue = `点击进入${this.nextStage}`
            }
        },
        // 坏账调整
        submitStage (flag) {
            const name = flag === 1 ? '坏账' : '退单'
            this.$confirm(`确定跳转到${name}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let parm = {
                    afterMarketState: flag === 1 ? 7 : 8,
                    orderNo: this.leftInfo.orderno
                }
                changeStage(parm).then((result) => {
                    if (result.data.StatusCode === 1) {
                        this.$message({
                            type: 'success',
                            message: result.data.StatusMsg
                        })
                        let jumpState = flag === 1 ? 70 : 80
                        const currentLeftInfo = this.leftInfo
                        this.setLeftData({
                            ...currentLeftInfo,
                            AfterMarketState: jumpState
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: result.data.StatusMsg
                        })
                    }
                }).catch((error) => {
                    this.$message({
                        type: 'info',
                        message: error.data.StatusMsg
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消跳转'
                })
            })
        },
        // 跳转阶段
        changeStage () {
            this.$confirm(`确定跳转到${this.nextStage}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let parm = {
                    afterMarketState: this.currentStage + 1,
                    orderNo: this.leftInfo.orderno
                }
                changeStage(parm).then((result) => {
                    if (result.data.StatusCode === 1) {
                        this.$message({
                            type: 'success',
                            message: result.data.StatusMsg
                        })
                        let jumpState = 0
                        if (this.leftInfo.AfterMarketState === 20) {
                            jumpState = 31
                        } else if (this.leftInfo.AfterMarketState > 30 && this.leftInfo.AfterMarketState < 40) {
                            jumpState = 40
                        } else {
                            jumpState = this.leftInfo.AfterMarketState + 10
                        }
                        const currentLeftInfo = this.leftInfo
                        this.setLeftData({
                            ...currentLeftInfo,
                            AfterMarketState: jumpState
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: result.data.StatusMsg
                        })
                    }
                }).catch((error) => {
                    this.$message({
                        type: 'info',
                        message: error.data.StatusMsg
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消跳转阶段'
                })
            })
        }
    },
    watch: {
        leftInfo () {
            this.InspectionStateName = this.leftInfo.InspectionState ? '开启订单' : '关闭订单'
            this.stage(this.leftInfo.AfterMarketState)
        }
    },
    filters: {

    }
}
</script>
<style lang="scss">
    .handleOper{
        border-bottom: 1px solid #ccc;
        li {
            font-size: 12px;
            float: left;
            height: 26px;
            line-height: 26px;
            text-align: center;
            cursor: pointer;
            background: #ddd;
            padding: 0 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin-right: 5px;
        }
    }
    .projectOper input[disabled]{
        background: #33adff;
    }
    .stepBox {
        input[disabled]{
            background: #33adff;
        }
        .el-step.is-horizontal .el-step__line {
            top: 8px;
        }
        .el-step__icon {
            width: 20px;
            height: 20px;
            font-size: 12px;
        }
        .el-step__title {
            font-size: 12px;
            line-height: 30px
        }
    }
</style>
